<template>
  <div>
    <el-row>
      <el-input
        v-model="content"
        style="width: 240px"
        placeholder="请输入搜索内容"
        clearable
      />
      <el-button type="primary" @click="search">新增</el-button>
    </el-row>

    <el-row style="margin-top: 20px">
      <el-button
        type="primary"
        @click="
          dialogVisible = true;
          title = '新增';
          ruleForm = {};
        "
        >新增</el-button
      >
      <el-button type="danger" @click="deleteChangeRow">删除</el-button>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column fixed prop="date" label="日期" width="150" />
        <el-table-column fixed prop="timer" label="时间" width="150" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="job" label="角色" width="120" />
        <el-table-column prop="sex" label="性别" width="120">
          <template #default="scope">
            {{ scope.row.sex === 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="desc"
          show-overflow-tooltip
          label="备注"
          width="300"
        />
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="deleteRow(scope.row)"
            >
              删除
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="
                ruleForm = scope.row;
                dialogVisible = true;
                title = '修改';
              "
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div
        style="
          width: 100%;
          margin-top: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        "
      >
        <el-pagination
          layout="prev, pager, next"
          :total="1000"
          @current-change="currentChange"
        />
      </div>
    </el-row>

    <!-- 新增以及修改弹出层 -->
    <el-dialog v-model="dialogVisible" :title="title" width="600">
      <div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="角色" prop="job">
            <el-select v-model="ruleForm.job" placeholder="请选择角色">
              <el-option label="前端开发" value="1" />
              <el-option label="后端开发" value="2" />
              <el-option label="UI设计" value="3" />
              <el-option label="测试工程师" value="4" />
              <el-option label="运维工程师" value="5" />
              <el-option label="实施工程师" value="6" />
            </el-select>
          </el-form-item>
          <el-form-item label="入职时间" required>
            <el-col :span="11">
              <el-form-item prop="date">
                <el-date-picker
                  v-model="ruleForm.date"
                  type="date"
                  aria-label="请选择日期"
                  placeholder="请选择日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col class="text-center" :span="2">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="timer">
                <el-time-picker
                  v-model="ruleForm.timer"
                  aria-label="Pick a time"
                  placeholder="请选择时间"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="请选择性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio value="1">男</el-radio>
              <el-radio value="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="desc">
            <el-input v-model="ruleForm.desc" type="textarea" />
          </el-form-item>
          <el-form-item>
            <div
              class="dialog-footer"
              style="width: 100%; display: flex; justify-content: flex-end"
            >
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                确定
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 搜索框输入
const content = ref("");
// 获取表单dom
const ruleFormRef = ref();
// 新增修改标题
const title = ref("新增");
// 定义表单弹出层

const ruleForm = reactive({
  name: "",
  job: "",
  date: "",
  timer: "",
  sex: "1",
  desc: "",
});

const rules = reactive({
  name: [{ required: true, message: "请输入你的姓名", trigger: "blur" }],
  job: [
    {
      required: true,
      message: "请选择你的角色",
      trigger: "change",
    },
  ],
  date: [
    {
      type: "date",
      required: true,
      message: "请选择日期",
      trigger: "change",
    },
  ],
  timer: [
    {
      type: "date",
      required: true,
      message: "请选择时间",
      trigger: "change",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: "change",
    },
  ],
  desc: [{ required: true, message: "请输入备注信息", trigger: "blur" }],
});

// 获取表格ref
const multipleTableRef = ref();
// 选中表格ids数组
const multipleSelectionIds = ref([]);
// 弹出层打开状态
const dialogVisible = ref(false);
// 处理选中的表格数组
const handleSelectionChange = (val) => {
  multipleSelectionIds.value = val.map((item) => item.id);
};

// 删除表格中的数据
const deleteRow = (row) => {
  console.log(row.id);

  ElMessageBox.confirm(`你确定要删除${row.id}项么?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

// 删除选中项
const deleteChangeRow = () => {
  ElMessageBox.confirm(
    `你确定要删除${multipleSelectionIds.value}项么?`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 页码发生变化时候触发
const currentChange = (page) => {
  console.log("页面为", page);
};
// 搜索方法
const search = () => {
  console.log(content.value);
};

// 提交表单 新增  修改 信息
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const tableData = [
  {
    id: 1,
    name: "张三",
    job: "1",
    date: "2024-12-12",
    timer: "",
    sex: "1",
    desc: "测试",
  },
  {
    id: 2,
    name: "李四",
    job: "1",
    date: "2024-12-12",
    timer: "",
    sex: "2",
    desc: "测试",
  },
  {
    id: 3,
    name: "王五",
    job: "1",
    date: "2024-12-12",
    timer: "",
    sex: "2",
    desc: "测试",
  },
  {
    id: 4,
    name: "赵六",
    job: "1",
    date: "2024-12-12",
    timer: "",
    sex: "1",
    desc: "测试",
  },
];
</script>

<style lang="scss" scoped>
</style>